<template>
	<view class="favorite">
		<view class="top">
			<view class="goBackButton" @click="goBack()">
				<image style="width: 100%;height: 100%;" src="../../static/icons/Iconly_Light_Arrow - Left@1x.png"
					mode="center">
				</image>
			</view>

			<view class="middle">
				Favorites
			</view>


			<view>

			</view>

		</view>



		<view class="no-favorite-img">
			<image src="../../static/images/favorite/no-favorite.png" style="width: 100%;height: 100%;"></image>
		</view>

		<view class="title">
			No favorites yet
		</view>

		<view class="desc">
			Hit the orange button downbelow to Create an order
		</view>

		<view class="startOrderButton" @click="goOrder()">
			Start ordering
		</view>
	</view>
</template>

<script setup>
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 跳转首页
	const goOrder = () => {
		uni.redirectTo({
			url: '/pages/home/home'
		})
	}
</script>

<style lang="scss" scoped>
	.favorite {
		width: 100vw;
		min-height: 100vh;
		height: 100%;
		background-color: rgba(246, 246, 249, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: start;


		.top {
			margin-top: 120rpx;
			width: 100%;
			padding: 0 58rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.middle {
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(0, 0, 0, 1);
			}

			.goBackButton,
			.deleteButton {
				width: 48rpx;
				height: 48rpx;
			}
		}



		.no-favorite-img {
			width: 704rpx;
			height: 704rpx;
			margin-top: 100rpx;
		}

		.title {
			font-size: 56rpx;
			font-weight: 600;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(0, 0, 0, 1);
		}

		.desc {
			margin-top: 34rpx;
			width: 434rpx;
			opacity: 0.57;
			/** 文本1 */
			font-size: 34rpx;
			font-weight: 400;
			text-align: center;
			letter-spacing: 0px;
			line-height: 23.8px;
			color: rgba(0, 0, 0, 1);
		}

		.startOrderButton {
			margin-top: 58rpx;
			width: 448rpx;
			height: 100rpx;
			border-radius: 20rpx;
			background: rgba(88, 192, 234, 1);
			box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
			font-size: 34rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 19.96px;
			color: rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>